<template>
  <view class="login-container">



    <!-- 沉浸式导航栏 -->
    <s-nav-bar :title="ismain ? '主账号登录' : '子账号登录'" :background="'transparent'" fixed immersive back
      :titleStyle="{ color: '#ffff', fontWeight: 'bold' }" :backStyle="{ color: '#fff' }"></s-nav-bar>
    <image class="bgs" src="https://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/haibg.png" />


    <view class="bigboxx">
      <!-- 顶部装饰区域 -->
      <view class="top-decor">
        <view class="logo">
          <image class="logo-icon" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/logo.png" mode="widthFix">
          </image>
        </view>
      </view>

      <!-- 登录表单区域 -->
      <view class="login-form">
        <!-- 账号类型切换 -->

        <!-- <view class="form-title">欢迎登录</view>
        <view class="form-subtitle">影德岛</view> -->

        <!-- 主账号手机号码输入框（仅在子账号登录时显示） -->
        <view class="input-group" v-if="!ismain">
          <input class="input" type="number" placeholder="请输入主账号手机号码" placeholder-class="placeholder"
            v-model="formData.parentMobile" />
          <image class="icons" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/shouji.png"></image>
        </view>

        <!-- 账号输入框 -->
        <view class="input-group">
          <input class="input" type="text" :placeholder="ismain ? '请输入主账号' : '请输入子账号'" placeholder-class="placeholder"
            v-model="formData.username" />
          <image class="icons" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/yonghu.png"></image>
        </view>

        <!-- 密码输入框 -->
        <view class="input-group">
          <input class="input" type="password" placeholder="请输入密码" placeholder-class="placeholder"
            v-model="formData.password" autocomplete="new-password" />
          <image class="icons" src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/mima.png"></image>
        </view>

        <view class="login-type-switch" @click="toggleLoginType">
          <text style="float: right;">{{ ismain ? '切换到子账号' : '切换到主账号' }}</text>
          <image src="/static/qiehuan.png" style="width: 40rpx;float: right;" mode="widthFix"></image>
        </view>
        <!-- 登录按钮 -->
        <view class="login-btn" @click="handleLogin">
          <text>登 录</text>
        </view>
        <view class="login-link">
          <text>还没有账号？</text>
          <text class="link" @click="goToRegister">立即注册</text>
        </view>
        <!-- 其他登录方式 -->
        <view class="other-login">
          <view class="divider">
            <view class="line"></view>
            <view class="text">其他登录方式</view>
            <view class="line"></view>
          </view>

          <!-- 微信登录 -->
          <view class="wechat-login" @click="handleWechatLogin">
            <s-icon name="wechat" size="40" color="#09BB07" />
            <view class="wechat-text">微信一键登录</view>
          </view>
        </view>
      </view>

      <!-- 底部版权信息 -->
      <view class="footer">
        <view class="copyright"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ismain: true, // true为主账号登录，false为子账号登录
      formData: {
        username: "",
        password: "",
        parentMobile: "", // 主账号手机号码，用于子账号登录
      },
    };
  },
  methods: {
    // 切换登录类型
    toggleLoginType() {
      this.ismain = !this.ismain;
      // 切换时清空主账号手机号
      if (this.ismain) {
        this.formData.parentMobile = "";
      }
    },

    handleLogin() {
      // 表单验证
      if (this.ismain) {
        // 主账号登录验证
        if (!this.formData.username || !this.formData.password) {
          uni.showToast({
            title: "请输入账号和密码",
            icon: "none",
          });
          return;
        }
      } else {
        // 子账号登录验证
        if (!this.formData.parentMobile || !this.formData.username || !this.formData.password) {
          uni.showToast({
            title: "请填写完整信息",
            icon: "none",
          });
          return;
        }

        // 验证手机号格式
        const phoneReg = /^1[3-9]\d{9}$/;
        if (!phoneReg.test(this.formData.parentMobile)) {
          uni.showToast({
            title: "请输入正确的手机号格式",
            icon: "none",
          });
          return;
        }
      }

      // 这里添加实际的登录逻辑
      uni.showLoading({
        title: "登录中...",
      });

      // 构建登录请求参数
      let loginParams = {
        username: this.formData.username,
        password: this.formData.password,
      };

      // 如果是子账号登录，添加额外参数
      if (!this.ismain) {
        loginParams.parent_mobile = this.formData.parentMobile;
        loginParams.is_sub_account = true;
      }

      this.sjuAjax.post("/user/login", loginParams, (res) => {
        console.log(res);
        if (res.code === 200) {

          uni.setStorageSync("version", res.data.user_info.version);
          // 保存是否为子账号的信息到用户信息中
          if (!this.ismain) {
            res.data.user_info.is_sub_account = true;
            res.data.user_info.is_sub = '1'; // 兼容旧系统可能使用的字段
          }

          this.sjuLogin.setToken(res.data.token, res.data.token_expire);
          uni.hideLoading();
          uni.showToast({
            title: "登录成功",
            icon: "success",
          });
          // 登录成功后跳转到首页
          uni.switchTab({
            url: "/pages/index/index",
          });
        } else {
          uni.hideLoading();
        }
      });
    },

    handleWechatLogin() {
      this.sjuAlert.showInfo("功能开发中");
      // 这里添加微信登录逻辑
      // 实际开发中需要调用微信SDK或后端接口
      // setTimeout(() => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: "微信登录成功",
      //     icon: "success",
      //   });
      //   // 登录成功后跳转到首页
      //   uni.switchTab({
      //     url: "/pages/index/index",
      //   });
      // }, 1500);
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/user/register'
      });
    }
  },
};
</script>

<style lang="scss">
.link {
  color: rgb(64, 128, 255) !important;
}

.icons {
  width: 46rpx;
  height: 46rpx;
  position: absolute;
  right: 0;
  opacity: 0.5;
}

.bgs {
  width: 100%;
  height: 100vh;
}

.bigboxx {
  position: fixed;
  width: 100%;
  padding-top: 175rpx;
  box-sizing: border-box;
  height: 100%;
  background: rgba(13, 18, 26, 0.6);
}

.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--v-bg);
}

/* 登录类型切换 */
.login-type-switch {
  text-align: right;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

/* 顶部装饰区域 */
.top-decor {
  width: 100%;
  height: 300rpx;
  border-radius: 0 0 80rpx 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .logo {
    width: 120rpx;
    height: 120rpx;
    color: #fff;
    border-radius: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo-icon {
      width: 88rpx;
    }
  }
}

/* 登录表单区域 */
.login-form {
  flex: 1;
  padding: 60rpx 50rpx;
  display: flex;
  flex-direction: column;

  .form-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .form-subtitle {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 60rpx;
  }
}

/* 输入框组 */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  height: 100rpx;
  margin-bottom: 30rpx;

  .input {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    color: white;
  }

  .placeholder {
    color: #aaa;
    font-size: 32rpx;
  }
}

/* 登录按钮 */
.login-btn {
  height: 100rpx;
  background: #ffffff1a;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 40rpx;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}

/* 其他登录方式 */
.other-login {
  margin-top: 80rpx;

  .divider {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .line {
      flex: 1;
      height: 1px;
      background: #ddd;
    }

    .text {
      padding: 0 20rpx;
      color: #999;
      font-size: 26rpx;
    }
  }

  .wechat-login {
    display: flex;
    flex-direction: column;
    align-items: center;

    .wechat-text {
      margin-top: 20rpx;
      color: #a7a7a7;
      font-size: 28rpx;
    }
  }
}

/* 登录链接 */
.login-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #a7a7a7;

  .link {
    color: var(--v-theme);
    margin-left: 10rpx;
    text-decoration: underline;
  }
}

/* 底部版权信息 */
.footer {
  padding: 30rpx 0;

  .copyright {
    text-align: center;
    color: #999;
    font-size: 24rpx;
  }
}
</style>